<template>
  <div>
    <el-card>
      <el-form ref="query" :model="query" label-width="80px" :inline="true">
        <el-form-item>
          <el-input
            v-model="query.keyword"
            placeholder="请输入内容"
            class="input-with-select"
          >
            <el-button slot="append" icon="el-icon-search" />
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="add">新增</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="dataList" style="width: 100%" border stripe>
        <el-table-column type="index" label="#" />
        <el-table-column prop="type" label="类型">
          <template slot-scope="scope">{{
            scope.row.type == 1 ? '视频' : '专栏'
          }}</template>
        </el-table-column>
        <el-table-column prop="extra" label="封面图">
          <template slot-scope="scope">
            <img :src="scope.row.extra.cover_url" style="width:50px;">
          </template>
        </el-table-column>
        <el-table-column label="标题">
          <template slot-scope="scope">{{ scope.row.extra.title }}</template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="del(scope.row)">移除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        :current-page="query.page"
        :page-size="query.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </el-card>

    <el-dialog :visible.sync="formVisible" :title="formTitle">
      <el-tabs v-model="activeTabName" @tab-click="handleTabClick">
        <el-tab-pane label="视频推荐" name="video">
          <el-table :data="localVideoList">
            <el-table-column type="index" label="#" />
            <el-table-column prop="title" label="名称" />
            <el-table-column prop="cover_url" label="封面">
              <template slot-scope="scope">
                <img :src="scope.row.cover_url" style="width:50px;">
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  @click="chooseLocalVideo(scope.row)"
                >选择</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            :current-page="localVideoQuery.page"
            :page-size="localVideoQuery.pageSize"
            layout="total, prev, pager, next, jumper"
            :total="localVidelTotal"
            @current-change="handleLocalVideoCurrentChange"
          />
        </el-tab-pane>
        <el-tab-pane label="专栏推荐" name="topic">
          <el-table :data="topicList">
            <el-table-column type="index" label="#" />
            <el-table-column prop="title" label="名称" />
            <el-table-column prop="cover_url" label="封面">
              <template slot-scope="scope">
                <img :src="scope.row.cover_url" style="width:50px;">
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  @click="chooseTopic(scope.row)"
                >选择</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            :current-page="topicQuery.page"
            :page-size="topicQuery.pageSize"
            layout="total, prev, pager, next, jumper"
            :total="topicTotal"
            @current-change="handleTopicCurrentChange"
          />
        </el-tab-pane>
      </el-tabs>
      <!--暂时做成一个一个的选择-->
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="closeForm">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>-->
    </el-dialog>
  </div>
</template>

<script>
import { getRecommendList, create, deleteRecommend } from '@/api/recommend/index'
import { getVideoList } from '@/api/aliyun/video'
import { getTopicList } from '@/api/topic/index'

export default {
  components: {},
  data() {
    return {
      id: 0,
      query: {
        page: 1,
        pageSize: 10
      },
      dataList: [],
      total: 0,

      formTitle: '新增推荐',
      formVisible: false,

      activeTabName: 'video',

      localVideoQuery: {
        page: 1,
        pageSize: 10
      },
      localVidelTotal: 0,
      localVideoList: [],

      topicQuery: {
        page: 1,
        pageSize: 10
      },
      topicTotal: 0,
      topicList: []
    }
  },
  created() {
    this.getDataList()
  },
  methods: {
    async getDataList() {
      getRecommendList(this.query).then(res => {
        console.log(res)
        this.dataList = res.data.list
        this.total = res.data.total
      })
    },
    handleCurrentChange(page) {
      this.query.page = page
      this.getDataList()
    },

    closeForm() {
      this.formVisible = false
    },
    add() {
      this.formVisible = true
      this.getLocalVideoList()
    },
    del(row) {
      this.$confirm('是否确认删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          const res = await deleteRecommend(row.id)
          if (res.code === 1) {
            this.getDataList()
            this.$message.success(res.msg)
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(res => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    handleTabClick(tab, event) {
      if (this.activeTabName === 'video') {
        this.getLocalVideoList()
      } else if (this.activeTabName === 'topic') {
        this.getTopicList()
      }
    },

    getLocalVideoList() {
      getVideoList(this.localVideoQuery).then(res => {
        this.localVideoList = res.data.list
        this.localVidelTotal = res.data.total
      })
    },
    getTopicList() {
      getTopicList(this.topicQuery).then(res => {
        this.topicTotal = res.data.total
        this.topicList = res.data.list
      })
    },
    handleLocalVideoCurrentChange(page) {
      this.localVideoQuery.page = page
      this.getLocalVideoList()
    },
    handleTopicCurrentChange(page) {
      this.topicQuery.page = page
      this.getTopicList()
    },

    chooseLocalVideo(row) {
      const data = {
        src_id: row.id,
        type: 1,
        category_id: row.category_id
      }
      create(data).then(res => {
        if (res.code === 1) {
          this.$message.success(res.msg)
          this.formVisible = false
          this.getDataList()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    chooseTopic(row) {
      const data = {
        src_id: row.id,
        type: 2,
        category_id: row.category_id
      }
      create(data).then(res => {
        if (res.code === 1) {
          this.$message.success(res.msg)
          this.formVisible = false
          this.getDataList()
        } else {
          this.$message.error(res.msg)
        }
      })
    }

    // async delVideo(videoId) {
    //   this.$confirm('是否确认删除, 是否继续?', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   })
    //     .then(async () => {
    //       const { data: res } = await this.$http.get(
    //         '/admin/video/deleteVideo',
    //         {
    //           params: { videoId }
    //         }
    //       )
    //       if (res.code === 1) {
    //         this.getVideoList()
    //         this.$message.success(res.msg)
    //       } else {
    //         this.$message.error(res.msg)
    //       }
    //     })
    //     .catch(res => {
    //       this.$message({
    //         type: 'info',
    //         message: '已取消删除'
    //       })
    //     })
    // }
  }
}
</script>

<style scoped>
.video_img img {
  width: 50px;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 10px;
  margin: 10px;
}
</style>
